<div class="account-main-section main-height">
    <div class="channel-content text-white">
        <div>
            <h3 class="channel-content-header text-uppercase text-white" style="display: inline-block;">{{language=='en'?'transfer':''}}{{language=='zh'?'转账':''}} </h3>
            <a (click)=" checkTransferHistory()" class="btn btn-sm btn-success" style="float: right;padding: 5px 7px;" i18n>{{language=='en'?'Transfer History':''}}{{language=='zh'?'转账历史':''}}</a>
        </div>
        <div class="text-center">
            <div class="row" style="margin-bottom: 4%;">
                <div class="col-md-2 col-xs-12"></div>
                <div class="col-md-7 col-xs-12">
                    <div class="row">
                        <div class="col-md-4 col-xs-12 text-center" style="margin-top: 8px;">
                            <label class="control-label" i18n>{{language=='en'?'Account email':''}}{{language=='zh'?'对方账户':''}}：</label>
                        </div>
                        <div class="col-md-8 col-xs-6">
                            <input class="form-control my_input" type="text" name="myAccount" [(ngModel)]="transferModel.toUserEmail" email="" #myAccount="ngModel" min=1 max=300 placeholder="{{language=='en'?'Please enter the Email of other account':''}}{{language=='zh'?'请输入对方帐号':''}}" i18n-placeholder required="required"/>
                            <div class="alert alert-danger" *ngIf="myAccount.invalid && (myAccount.dirty || myAccount.touched)">
                                <div *ngIf="myAccount.errors.required" i18n>
                                    {{language=='en'?'Account is required!':''}}{{language=='zh'?'帐号不能为空':''}}
                                </div>
                                <div *ngIf="!myAccount.errors.required && myAccount.errors.email" i18n>
                                    {{language=='en'?'Invalid email!':''}}{{language=='zh'?'邮箱格式不正确':''}}
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
                <div class="col-md-3 col-xs-12"></div>
            </div>
            <div class="row" style="margin-bottom: 4%;">
                <div class="col-md-2 col-xs-12"></div>
                <div class="col-md-7 col-xs-12">
                    <div class="row">
                        <div class="col-md-4 col-xs-12 text-center" style="margin-top: 8px;">
                            <label class="control-label" i18n>{{language=='en'?'WAKANDA amount':''}}{{language=='zh'?'转账数额':''}}：</label>
                        </div>
                        <div class="col-md-8 col-xs-12">
                            <input class="form-control my_input" type="number" name="money" [(ngModel)]="transferModel.amount" #money="ngModel" (blur)="checkMoney()"  placeholder="{{language=='en'?'Please enter the amount to transfer':''}}{{language=='zh'?'请输入转账金额':''}}" i18n-placeholder required="required"/>
                            <div class="alert alert-danger" *ngIf="money.invalid && (money.dirty || money.touched)">
                                <div *ngIf="money.errors.required" i18n>
                                    {{language=='en'?'Money is required!':''}}{{language=='zh'?'金额不能为空':''}} 
                                </div>
                            </div>
                            <div class="alert-danger alert" *ngIf="checkMessage == 1" i18n>
                                {{language=='en'?'The amount of the transfer must be more than 0 ':''}}{{language=='zh'?'金额必须大于0':''}} 
                            </div>
                            <div class="alert-danger alert" *ngIf="checkMessage == 2" i18n>
                                {{language=='en'?'Sorry, your credit is running low':''}}{{language=='zh'?'对不起，您的余额不足':''}}
                            </div>
                            <div class="" *ngIf="checkMessage == 3">
                            </div>
                        </div>
                    </div>
                </div>
                <div class="col-md-3 col-xs-12"></div>
            </div>
            <div class="row">
                <div class="col-md-2 col-xs-12"></div>
                <div class="col-md-7 col-xs-12">
                    <div class="row mt-50">
                        <div class="col-md-12 col-xs-12">
                            <button type="button" class="btn btn-primary btn-block" [disabled]="transferModel.amount=='' || transferModel.toUserEmail==''" (click)="openModal(template)">{{language=='en'?'Submit':''}}{{language=='zh'?'提交':''}}</button>

                            <ng-template #template>
                                <div class="modal-header">
                                    <h4 class="modal-title pull-left" i18n>{{language=='en'?'Please enter your payment password':''}}{{language=='zh'?'请输入您的支付密码':''}}</h4>
                                    <button type="button" class="close pull-right" aria-label="Close" (click)="decline()">
                                        <span aria-hidden="true">&times;</span>
                                    </button>
                                </div>
                                <div class="modal-body">
                                    <input type="password" [(ngModel)]="transferModel.paypassword" #payPassword="ngModel" autocomplete="off" >
                                </div>
                                <div class="modal-body text-center">
                                    <button type="button" class="btn btn-primary" (click)="confirm()"  i18n>{{language=='en'?'Pay':''}}{{language=='zh'?'支付':''}}</button>
                                    <button type="button" class="btn btn-default" style="background-color:	#D0D0D0;" (click)="decline()" i18n>{{language=='en'?'Cancel':''}}{{language=='zh'?'取消':''}}</button>
                                </div>
                            </ng-template>
                        </div>
                    </div>
                </div>
                <div class="col-md-3 col-xs-12"></div>
            </div>
        </div>
    </div>

</div>


